<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        class Test extends React.Component {
            // render在Test的原型对象上，
            render() { 
                console.log(this)//这个this指向的就是组件实例对象
                return  <h2>我是用类定义的组件(适用于[复杂的组件]的定义)</h2>//如果你的组件有状态就是复杂组件
            }
        }
        ReactDOM.render(<Test />, document.getElementById("test"))
        /*
            执行了ReactDOM.render(<Demo/>,****)
                1.React解析了组件标签。找到组件
                2.发现组件使用类定义的，随后new出了该类的实例，并通过实例调用到了原型上的render方法
                3.将render返回的虚拟DOM，呈现在页面上
        */ 
    </script>
</body>
</html>